<template>
    <div>
      <van-nav-bar title="账单" left-arrow @click-left="onBack" />

      <div class="header" style="width: 300px">
        <van-tabs v-model="activeTab" @change="findAll(activeTab)" sticky class="my-tabs">
          <van-tab title="全部" name=""></van-tab>
          <van-tab title="收入" name="1"></van-tab>
          <van-tab title="兑换" name="3"></van-tab>
        </van-tabs>
      </div>

      <div v-for="item in rechargeList">
        <div class="task-item">
          <div class="task-icon">
            <img src="https://acai-reading.oss-cn-beijing.aliyuncs.com/%E9%87%91%E5%B8%81%E5%8A%A0.png" style="width: 40px;height: 40px;border-radius: 50%" v-if="item.typename==='1' || item.typename==='3'">
            <img src="https://acai-reading.oss-cn-beijing.aliyuncs.com/%E9%87%91%E5%B8%81%E5%87%8F.png" style="width: 40px;height: 40px;border-radius: 50%" v-if="item.typename==='2'">
          </div>
          <div class="task-content">
            <div class="task-name">{{item.content}}</div>
            <div class="task-desc">{{item.paytime}}</div>
          </div>
          <div class="task-reward">
            <div class="reward-amount" v-if="item.typename==='1' || item.typename==='3'">+{{item.amount}}</div>
            <div class="reward-two" v-if="item.typename==='2'">-{{item.amount}}</div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
    import axios from "axios";
    export default {
      data(){
        return{
          activeTab:"",
          recharge:{},
          one:{},
          rechargeList:[],
        }
      },
      methods:{
        findAll(){
          console.log(this.activeTab)
          this.recharge.typename = this.activeTab;
          this.recharge.id = this.one.id;
          axios.post("http://localhost:9999/api-user/recharge/findAll",this.recharge).then(res=>{
            this.rechargeList = res.data;
          })
        },
        onBack(){
          this.$router.go(-1);
        }
      },
      created(){
          this.one = JSON.parse(localStorage.getItem("user"));

          this.findAll();
      }
    }
</script>



<style scoped>
.header {
  position: relative;
  display: flex;
  align-items: center;
  margin-left: 40px;
}
.my-tabs{
  flex: 1;
}
.task-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
  margin: 0 15px;
}

.task-content {
  flex: 1;
  margin: 0 12px;
}

.task-name {
  font-weight: bold;
  margin-bottom: 4px;
}

.task-desc {
  color: #999;
  font-size: 12px;
}

.task-reward {
  text-align: right;
}

.reward-amount {
  color: #ff6034;
  font-weight: bold;
  margin-bottom: 4px;
}
.reward-two {
  color: gray;
  font-weight: bold;
  margin-bottom: 4px;
}
</style>
